<script lang="ts" setup>
import { computed, onMounted, provide, reactive, ref } from 'vue';
import { useRouter } from 'vue-router';

import { Modal } from 'ant-design-vue';

import { get1688ShopList } from '#/api';
import { auto1688stor } from '#/store';

import bodyContent from './body-content.vue';
import BottomButton from './bottom-button.vue';
import topSearch from './top-search.vue';

const auto1688storTres = auto1688stor();
// const nowData = computed(() => auto1688storTres.auto1688.nowSelectDyShop);

const dataInxiayou = auto1688storTres.auto1688.bindShopList?.filter(
  (item) => item.pType === 1 && item.isUseing === 1 && item.status === 1,
);

// console.log(dataInxiayou, nowData);
const selectProducts = ref<any>([]);
const products = ref([]);
const loading = ref(false);
const queryParams = reactive({
  pageSize: 20,
  pageNum: 1,
});
const pageInfo = ref({});

provide('selectProducts', { selectProducts });

provide('pageInfo', { pageInfo });
function areAllElementsInArray(mainArray: any[], subArray: any[]) {
  return mainArray.every((element: any) => subArray.includes(element));
}

const isSelectAll = computed(() => {
  const productIds = products.value.map((item: any) => item.itemId);
  return areAllElementsInArray(productIds, selectProducts.value);
});
function selectAllProducts() {
  const productIds = products.value.map((item: any) => item.itemId);
  // 判断是否已经全选

  if (!isSelectAll.value) {
    selectProducts.value.push(...productIds);
    selectProducts.value = [...new Set(selectProducts.value)];
    return;
  }
  selectProducts.value = selectProducts.value.filter(
    (item: any) => !productIds.includes(item),
  );
}
function fangxuanselect() {
  // 反选当前页
  const productIds = products.value.map((item: any) => item.itemId);
  const selectedIds = new Set(
    selectProducts.value.filter((item: any) => productIds.includes(item)),
  );
  selectProducts.value = selectProducts.value.filter(
    (item: any) => !productIds.includes(item),
  );
  selectProducts.value.push(
    ...productIds.filter((item: any) => !selectedIds.has(item)),
  );
}
provide('queryParams', {
  queryParams,
  isSelectAll,
  loading,
  getYxGoods,
  selectAllProducts,
  fangxuanselect,
});

function getYxGoods(params?: any) {
  loading.value = true;
  get1688ShopList(Object.assign(queryParams, params || {})).then((res) => {
    // console.log('商品列表', res);
    pageInfo.value = res.pageInfo;
    products.value = res.result.map((item: any) => {
      item.maxPrice = Number((item.maxPrice / 100).toFixed(2));
      item.minPrice = Number((item.minPrice / 100).toFixed(2));
      item.price =
        item.maxPrice === item.minPrice
          ? item.maxPrice
          : `${item.minPrice}-${item.maxPrice}`;
      return item;
    });
    loading.value = false;
  });
}
// const route = useRoute();
const router = useRouter();
onMounted(() => {

  selectProducts.value=[];
 
  getYxGoods();
});
provide('products', { products, loading });
</script>

<template>
  <div class="relative h-full overflow-hidden">
    <topSearch :get-yx-goods="getYxGoods" />
    <bodyContent />
    <BottomButton />
  </div>
</template>
